<template>
  <el-aside class="el-aside1" :width="!isCollapse ? '200px' : '64px'">
    <el-menu
      :default-active="activeIndex"
      popper-effect="light"
      router
      class="el-menu-demo"
      :collapse="isCollapse"
    >
      <ElSubMenu index="1">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>账户管理</span>
        </template>
        <el-menu-item index="User" :route="router.user">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yonghu1" />
          </svg>
          <template #title>题库用户</template>
        </el-menu-item>
        <el-menu-item index="uservip" :route="router.uservip">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yonghu1" />
          </svg>
          <template #title>精选题库用户</template>
        </el-menu-item>
        <el-menu-item index="zhimahuUser" :route="router.zhimahuuser">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-yonghu1" />
          </svg>
          <template #title>知码狐用户</template>
        </el-menu-item>
      </ElSubMenu>
      <el-menu-item index="team" :route="router.team">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tiku" />
        </svg>
        <template #title>团队管理</template>
      </el-menu-item>
      <ElSubMenu index="2">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>题库管理</span>
        </template>
        <el-menu-item index="questionbank" :route="router.questionbank">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-16" />
          </svg>
          <template #title>题单管理</template>
        </el-menu-item>
        <el-menu-item index="question" :route="router.question">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-16" />
          </svg>
          <template #title>题目管理</template>
        </el-menu-item>
        <el-menu-item index="questionGroup" :route="router.questionGroup">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-16" />
          </svg>
          <template #title>题目分组</template>
        </el-menu-item>
        <el-menu-item index="label" :route="router.label">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>标签管理</template>
        </el-menu-item>
        <el-menu-item index="AISolution" :route="router.AISolution">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>题目题解(AI)</template>
        </el-menu-item>
        <el-menu-item index="examine" :route="router.examine">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>内容审核</template>
        </el-menu-item>
        <el-menu-item index="specialjudge" :route="router.specialjudge">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-16" />
          </svg>
          <template #title>Special Judge</template>
        </el-menu-item>
        <el-menu-item index="测评管理" :route="router.Evaluation">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-16" />
          </svg>
          <template #title>测评管理</template>
        </el-menu-item>
      </ElSubMenu>
      <ElSubMenu index="activity_mgmt">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-huodong" />
          </svg>
          <span>比赛管理</span>
        </template>
        <el-menu-item index="Activity" :route="router.Activity">
          <el-icon>
            <Setting></Setting>
          </el-icon>
          <template #title>比赛配置</template>
        </el-menu-item>
        <el-menu-item
          index="MatchQuestionCheck"
          :route="router.MatchQuestionCheck"
        >
          <el-icon>
            <Setting></Setting>
          </el-icon>
          <template #title>赛题审核</template>
        </el-menu-item>
        <el-menu-item index="matchLabel" :route="router.matchLabel">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>类别配置</template>
        </el-menu-item>
      </ElSubMenu>
      <ElSubMenu index="AI_mgmt">
        <template #title>
          <el-icon>
            <Management />
          </el-icon>
          <span>AI管理(开发用)</span>
        </template>
        <el-menu-item index="AICfg" :route="router.AICfg">
          <el-icon>
            <Setting></Setting>
          </el-icon>
          <template #title>AI配置</template>
        </el-menu-item>
        <el-menu-item index="AITask" :route="router.AITask">
          <el-icon>
            <List />
          </el-icon>
          <template #title>任务管理</template>
        </el-menu-item>
        <el-menu-item index="AILog" :route="router.AILog">
          <el-icon>
            <List />
          </el-icon>
          <template #title>日志</template>
        </el-menu-item>
      </ElSubMenu>
      <el-menu-item index="signinactivity" :route="router.signinactivity">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-tiku" />
        </svg>
        <template #title>活动签到</template>
      </el-menu-item>
      <ElSubMenu index="3">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>通知管理</span>
        </template>
        <el-menu-item index="notice" :route="router.notice">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>网站通知</template>
        </el-menu-item>

        <el-menu-item index="SmsAll" :route="router.SmsAll">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>短信通知</template>
        </el-menu-item>
      </ElSubMenu>

      <ElSubMenu index="_integral">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>积分</span>
        </template>
        <el-menu-item index="integral" :route="router.integral">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>积分记录</template>
        </el-menu-item>

        <el-menu-item index="integrallist" :route="router.integrallist">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>积分列表</template>
        </el-menu-item>
      </ElSubMenu>
      <ElSubMenu index="5">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>商城</span>
        </template>
        <el-menu-item index="Iintegralreward" :route="router.Iintegralreward">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>金币兑换</template>
        </el-menu-item>
      </ElSubMenu>
      <ElSubMenu index="4">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>课程管理</span>
        </template>
        <el-menu-item index="catebags" :route="router.catebags">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>课程组管理</template>
        </el-menu-item>
        <el-menu-item index="courses" :route="router.courses">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>课程管理</template>
        </el-menu-item>
        <el-menu-item index="coursesections" :route="router.coursesections">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>课程小节管理</template>
        </el-menu-item>
      </ElSubMenu>

      <ElSubMenu index="_tuyaiot">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>物联网管理</span>
        </template>
        <el-menu-item index="tuyaiot" :route="router.tuyaiot">
          <el-icon>
            <Setting></Setting>
          </el-icon>
          <template #title>组织管理</template>
        </el-menu-item>
      </ElSubMenu>

      <ElSubMenu index="_statistics">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>数据统计</span>
        </template>
        <el-menu-item index="statisticschar" :route="router.statisticschar">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>数据大盘</template>
        </el-menu-item>

        <el-menu-item index="statistics" :route="router.statistics">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>团队统计</template>
        </el-menu-item>
        <el-menu-item index="logs" :route="router.logs">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>学习行为</template>
        </el-menu-item>
        <el-menu-item index="userquestion" :route="router.userquestion">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>答题记录</template>
        </el-menu-item>
        <el-menu-item index="userquestionbank" :route="router.userquestionbank">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>题单记录</template>
        </el-menu-item>
      </ElSubMenu>

      <ElSubMenu index="5-apitest">
        <template #title>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <span>后台运维</span>
        </template>
        <el-menu-item index="apitest" :route="router.apitest">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>接口测试</template>
        </el-menu-item>
        <el-menu-item index="customerservice" :route="router.customerservice">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>助教老师设置</template>
        </el-menu-item>
        <el-menu-item index="customerservice" :route="router.createuserquestion">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-tiku" />
          </svg>
          <template #title>生成用户答题</template>
        </el-menu-item>
      </ElSubMenu>

      <el-menu-item index="article" :route="router.article">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-16" />
        </svg>
        <template #title>文章管理</template>
      </el-menu-item>

      <el-menu-item index="setup" :route="router.setup">
        <el-icon>
          <Setting></Setting>
        </el-icon>
        <template #title>网站设置</template>
      </el-menu-item>

      <el-menu-item
        class="isCollapse"
        :route="route"
        @click="() => setisCollapse(!isCollapse)"
      >
        <el-icon>
          <ArrowLeft v-show="!isCollapse"></ArrowLeft>
          <ArrowRight v-show="isCollapse"></ArrowRight>
        </el-icon>
        <template #title>收回</template>
      </el-menu-item>
    </el-menu>
  </el-aside>
</template>

<script setup lang="ts">
import { ArrowLeft, ArrowRight, Setting } from "@element-plus/icons-vue";
import { ElAside, ElMenu, ElMenuItem, ElSubMenu } from "element-plus";
import { ref } from "vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { Storekey } from "../../interface";
import * as router from "./data/router";
type P = {
  isCollapse: boolean;
  setisCollapse: Function;
};
defineProps<P>();
const route = useRoute();

const activeIndex = ref("");

const store = useStore(Storekey);
</script>

<style scoped>
.el-menu-demo {
  min-height: 100%;
  overflow-y: auto;
  --el-menu-bg-color: #333;
  --el-menu-text-color: #eee;
  --el-menu-active-color: #fff;
  --el-menu-hover-bg-color: #1561af;
}

.el-menu-item.is-active {
  background-color: var(--el-color-primary);
}

.w-200 {
  width: 200px;
  overflow: hidden;
}

.w-64 {
  width: 64px;
  overflow: hidden;
}

.el-aside1 {
  transition: all 0.3s;
}

.icon {
  margin-right: 5px;
  width: 24px;
  text-align: center;
  font-size: 18px;
  vertical-align: middle;
}
</style>
